<template>
  <el-row type="flex" justify="space-between" align="middle" class="nav-container">
    <div class="nav-title">{{ roomInfo }}</div>
    <div class="nav-center">
      <div class="time">{{ updateTime }}</div>
    </div>
    <el-row type="flex" class="nav-menu">
      <el-button
        v-if="+me.role === 1"
        @click="handleClick('classState')"
        size="mini"
        :type="classState ? 'danger' : 'primary'"
        >{{ classState ? t('nav.class_end') : t('nav.class_start') }}</el-button
      >
      <span class="icon icon-close edu-icon-tuichu" @click="handleClick('exit')"></span>
    </el-row>
  </el-row>
</template>

<script>
import { roomStore } from '../utils/room'
import { globalStore } from '../utils/global'
import { t } from '../i18n/i18n'
import { mapState } from 'vuex'
const ClassState = {
  CLOSED: 0,
  STARTED: 1
}
export default {
  props: ['roomInfo'],
  data() {
    return {
      roomState: roomStore,
      globalStore: globalStore,
      t: t,
      updateTime: '',
      timer: null,
      classState: roomStore.state.course.courseState
    }
  },
  computed: {
    me() {
      return this.roomState.state.me
    },
    course() {
      return this.roomState.state.course
    },
    startTime() {
      return this.roomState.state.course.startTime
    },
    ...mapState('live', {
      roomId: state => state.roomId
    })
  },
  watch: {
    'roomState.state.course.courseState': {
      deep: true,
      handler: function(n, o) {
        this.classState = n
        if (n === ClassState.STARTED && this.timer === null && this.startTime) {
          this.calcDuration(this.startTime)
        }
        if (this.timer && n === ClassState.CLOSED) {
          clearInterval(this.timer)
          this.timer = null
        }
      }
    }
  },
  methods: {
    calcDuration(time) {
      this.timer = setInterval(() => {
        let timedata = parseInt((+Date.now() - time) / 1000)
        let hour = this.checkedZero(parseInt(timedata / 3600))
        let minute = this.checkedZero(parseInt(timedata / 60) % 60)
        let second = this.checkedZero(parseInt(timedata % 60))
        this.updateTime = hour + ':' + minute + ':' + second
      }, 1000)
    },
    checkedZero(number) {
      if (number < 10) {
        number = `0${number}`
      }
      return number
    },
    handleClick(type) {
      if (type === 'exit') {
        this.$messageBox
          .confirm(t('toast.quit_room'))
          .then(() => {
            this.roomState.exitRoom().finally(() => {
              this.roomState.leaveChannel()
              this.$router.go(-1)
            })
          })
          .catch(() => {})
      } else if (type === 'classState') {
        if (this.classState == 1) {
          this.$messageBox
            .confirm('结束直播')
            .then(() => {
              this.roomState.exitRoom().finally(() => {
                this.$router.go(-1)
                this.roomState.exitAll()
                this.roomState.rtcClient.unpublishLocalStream()
              })
              this.$api.setLiveRoomEnd({ room_no: this.roomId }, res => {
                this.roomState.updateCourse({
                  courseState: 0
                })
              })
            })
            .catch(() => {})
        } else {
          this.$messageBox
            .confirm('开始直播')
            .then(() => {
              this.$api.setLiveRoomStart({ room_no: this.roomId }, res => {
                this.roomState.updateCourse({
                  courseState: 1
                })
              })
            })
            .catch(() => {})
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../big-class.scss';
</style>
